<script lang="ts">
import {defineComponent,SlotsType} from "vue"

export default defineComponent({
  slots: Object as SlotsType<{ left: {}, right: {} }>,
  name: "DivideCenter"
})
</script>

<template>
  <div class="divide-center">
    <table>
      <tbody>
      <tr>
        <td class="left"><slot name="left"></slot></td>
        <td class="right"><slot name="right"></slot></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped lang="scss">
.divide-center {
  box-sizing: border-box;
  height: auto;

  .left {
    padding:2px;
    //border:var(--el-table-border);
    border-right: none;
    border-radius:4px 0 0 4px;
    text-align: right;
    line-height: 1;
    outline: none;
    &:hover{
      background-color: hsla(0, 0%, 100%, 0); /* 完全透明 */
    }
  }

  .right {
    padding:2px;
    //border:var(--el-table-border);
    border-radius:0 4px 4px 0;
    border-left: none;
    text-align: left;
    line-height: 1;
    &:hover{
      background-color: hsla(0, 0%, 100%, 0); /* 完全透明 */
    }
   }
}
</style>